<template>
  <div style="text-align: left">
    <el-button
      class="add-button"
      type="success"
      @click="dialogFormVisible = true"
    >添加用户</el-button>
    <el-button
      type="success"
      class="flush-button"
      @click="flush()"
    >刷新</el-button>
    <el-dialog
      title="添加用户"
      :visible.sync="dialogFormVisible"
      width="25%"
      @close="clear()"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="rules"
        label-position="left"
        label-width="0px"
      >
        <el-form-item prop="username" :rules="rules.username">
          <el-input
            v-model="addForm.username"
            type="text"
            auto-complete="off"
            placeholder="账号"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="addForm.password"
            type="password"
            auto-complete="off"
            placeholder="密码"
          />
        </el-form-item>
        <el-form-item prop="name" :rules="rules.name">
          <el-input
            v-model="addForm.name"
            type="text"
            auto-complete="off"
            placeholder="真实姓名"
          />
        </el-form-item>
        <el-form-item prop="phone" :rules="rules.phone">
          <el-input
            v-model="addForm.phone"
            type="text"
            auto-complete="off"
            placeholder="电话号码"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="addForm.email"
            type="text"
            auto-complete="off"
            placeholder="E-Mail"
          />
        </el-form-item>
        <el-form-item style="width: 100%">
          <el-button
            type="primary"
            style="width: 40%;background: #505458;border: none"
            @click=" submitForm('addForm')"
          >添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'BulkRegistration',
  inject: ['reload'],
  data() {
    var checkUserName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'))
      }
      callback()
    }
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('姓名不能为空'))
      }
      callback()
    }
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('电话不能为空'))
      }
      callback()
    }
    return {
      dialogFormVisible: false,
      rules: {
        username: [{ validator: checkUserName, trigger: 'blur' }],
        name: [{ validator: checkName, trigger: 'blur' }],
        phone: [{ validator: checkPhone, trigger: 'blur' }]
      },
      addForm: {
        username: '',
        password: '',
        name: '',
        phone: '',
        email: ''
      }
    }
  },
  methods: {
    clear() {
      this.addForm = {
        username: '',
        password: '',
        name: '',
        phone: '',
        email: ''
      }
      // this.$ref[params].resetFields();
    },

    flush() {
      this.reload()
    },
    register() {
      this.$axios
        .post('/api/admin/user/add', this.addForm)
        .then(resp => {
          if (resp.status === 200) {
            // this.$alert('新增成功', '提示', {
            //   confirmButtonText: '确定'
            // })
            this.clear()
            // this.$emit('onSubmit')
            this.$message.success('新增成功')
            this.reload()
          }
        })
        .catch(error => {
          this.$message.error(error.response.data.error)
          this.reload()
        })
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.register()
        } else {
          this.$message.error('请完成验证再提交')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.add-button {
  margin: 18px 0 0 10px;
}
.flush-button {
  margin: 18px 0 0 10px;
}
</style>
